<template>
	<view class="productInfoBox">
		<view class="leftInfo">
			<view class="imgbox">
				<!-- <my-Image class="img" :src="details.commodityPic" mode="aspectFill"/> -->
				<image class="img" :src="details.commodityPic || '/static/imgs/default.png'" mode="aspectFill"></image>
			</view>
			<text class="integral">{{details.unitPrice}}积分</text>
		</view>
		<view class="info">
			<view class="title">{{details.commodityName}}</view>
			<view class="rp">兑换数量</view>
			<view class="number">
				<number-selector v-model="quantity" @change="setNum"/>
			</view>
			<view class="price">共计使用：<text class="num">{{details.unitPrice *quantity}}积分</text></view>
		</view>
	</view>
</template>

<script>
	import {mapGetters} from "vuex"
	import numberSelector from '@/components/numberSelector/numberSelector.vue'
	//import myImage from "@/components/myImage/myImage.vue"
	export default {
		components:{
			numberSelector,
			//myImage
		},
		data(){
			return{
				quantity:1
			}
		},
		created() {
			this.quantity = this.buyInfo.quantity
		},
		computed:{
		    ...mapGetters({
		        details:'base/details',
				buyInfo:'base/buyInfo'
		    })
		},
		methods:{
			setNum(quantity){
				this.$store.commit('base/set_buyInfo',{quantity})
				console.log("buyInfo:",this.buyInfo)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.productInfoBox{
		box-sizing: border-box;
		display: flex;
		width: 100%;
		border-radius: 20rpx;
		background: #fff;
		overflow: hidden;
		padding: 20rpx;
		.leftInfo{
			width: 260rpx;
			.imgbox{
				width: 100%;
				height: 220rpx;
				overflow: hidden;
				.img{
					display: block;
					width: 100%;
					height: 100%;
				}
			}
			.integral{
				display: block;
				text-align: center;
				color:#238de8;
				font-size: 26rpx;
				padding: 15rpx 0;
			}
		}
		.info{
			flex: 1;
			padding: 0 0 0 20rpx;
			font-size: 28rpx;
			line-height: normal;
			.title{
				display: block;
				font-size: 28rpx;
				font-weight: bold;
			}
			.rp{
				padding: 15rpx 0;
			}
			.number{
				width: 300rpx;
			}
			.price{
				padding: 20rpx 0 0 0;
				.num{
					color: #ca0000;
					font-weight: bold;
				}
			}
		}
	}
</style>